
<html
	<head>
		<title>G Javascript library</title>
		<link href="src/css/layout.css" rel="stylesheet" type="text/css" />
		<style>

			#testbox {
				width:800px;
				height:600px;
				float:left;
				margin-left:2px;
				border:0px;
				padding:0px;
			}
			#demotestlist {
				height:100%;
				max-width:200px;
				overflow:auto;
			}

			.blktitle {
				margin-top:2px;
				padding-top:2px;
				padding-bottom:2px;
				width:100%;
				background-image:url(src/css/images/blackbar.png);
				border-top:#CCC solid 1px;
				border-bottom:#333 solid 1px;
				text-align:center;
			}
			.blktitle a {
				color:#FFF;
				font-weight:bold;
				padding-left:4px;
			}
			.blkbody li a {
				margin-left:4px;
				color:#000;
			}
		</style>
		<script>
			var PAGE_LIST = {
				'TEST': [
					{name: 'G.Utils.List', url: 'test/test_list.html'},
					{name: 'G.Utils.Tree', url: 'test/test_tree.html'},
					{name: 'G.Widget.DataGrid', url: 'test/test_datagrid.html'},
					{name: 'G.Widget.TreeView', url: 'test/test_treeview.html'}
				],
				'DEMO': [
					{name: 'Class Inheritance', url: 'demo/demo_class.html'},
					{name: 'G.DataGrid', url: 'demo/demo_datagrid.html'},
					{name: 'G.UMLTreeView', url: 'demo/demo_treeview.html'},
					{name: 'BBoard Designer', url: 'app/bbdesigner/index.html'}
				]
			};

			function load_page_list(typ) 
			{
				var id = typ + "list";
				var lst = PAGE_LIST[typ];

				var em = document.getElementById(id);

				for (var i = 0; i < lst.length; i++) {
					t = lst[i];
					var l = document.createElement('li');
					var a = document.createElement('a');
					a.href = "javascript:load_page(\"" + typ + "\", " + i + ")";
					a.innerHTML = t.name;
					l.appendChild(a);
					em.appendChild(l);
				}
			}


			function load_list()
			{
				load_page_list("TEST");
				load_page_list("DEMO");
			}

			function load_page(typ, indx) 
			{
				var box = document.getElementById("testbox");
				box.src = PAGE_LIST[typ][indx].url;
			}
		</script>
	</head>
	<body onload="load_list()" style="background:#00401A;">
		<table class="layout">
			<tr><td colspan=2 id="head">
					<a style="color:#00F; font-size:20px; padding-left:40px;" href="doc/generator/index.html">Document</a>
					<a style="color:#00F; font-size:20px; padding-left:40px;" href="app/bbdesigner/index.html">Bread Board Designer</a>
			</td></tr>
			<tr>
				<td width="200px" id="left">
					<div id="demotestlist">
					<div class="block">
						<div class="blktitle"><a>Tests</a></div>
						<div class="blkbody" id="TESTlist">
					</div>
					<div class="block">
						<div class="blktitle"><a>Demo</a></div>
						<div class="blkbody" id="DEMOlist"></div>
					</div>
				</div>
				</td>
				<td id="center">
					<iframe id="testbox"></iframe>
				</td>
			</tr>
		</table>
	</div>
	</body>
</html>
